<template>
  <span class="node-name-title" >
    <span v-if="!state.isInput" @click.stop="clickEvent()">{{ value||'设置条件名称' }}</span>
    <el-input ref="editInputRef" v-if="state.isInput" type="text" :clearable="true"  @blur="blurEvent()" @focus="focusEvent()"  v-model="value"  />
  </span>
</template>
<script lang="ts" setup name="ServiceEditName">
//------------------接收传入参数(组件)-------------------
const props = defineProps({
	modelValue: String,
});
const editInputRef=ref();
const value=ref(props.modelValue)
const state=reactive({ isInput: false })
// 定义子组件向父组件传值/事件
const emit = defineEmits(['edit', 'update:modelValue']);
const clickEvent=()=> {
  state.isInput = true;
  nextTick(()=>{
    editInputRef.value.focus()
  })
  
  emit('edit', false);
}
const blurEvent=()=> {
  state.isInput = false;
  emit('update:modelValue', value.value);
  emit('edit', true);
}
const focusEvent=()=>{

}
</script>
